<template>
  <div class="edit-page-wrap">

    <Head title="设备信息">
      <template #content>
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="120px"
          class="edit-form-wrap"
        >
          <el-form-item
            label="设备类型"
            prop="deviceType"
          >
            <qc-select
              :value="ruleForm.deviceType"
              :options="optionsS.deviceTypeList"
              placeholder="请选择设备类型"
              @change="handleDeviceType"
            >
            </qc-select>
          </el-form-item>
          <template v-if="ruleForm.deviceType!=='6'">
            <el-form-item
              label="设备名称"
              prop="deviceName"
            >
              <el-input
                v-model.trim="ruleForm.deviceName"
                placeholder="请输入设备名称"
                maxlength="30"
                clearable
              />
            </el-form-item>
            <el-form-item
              label="设备编号"
              prop="deviceNum"
            >
              <el-input
                v-model.trim="ruleForm.deviceNum"
                placeholder="请输入设备编号"
                maxlength="30"
                clearable
              />
            </el-form-item>
            <el-form-item
              label="网关编号"
              prop="gateWayNum"
            >
              <el-input
                v-model.trim="ruleForm.gateWayNum"
                placeholder="请输入网关编号"
                maxlength="30"
                clearable
              />
            </el-form-item>
          </template>
          <template v-else>
            <el-form-item
              label="视频URL"
              prop="monitorUrl"
            >
              <el-input
                v-model.trim="ruleForm.monitorUrl"
                placeholder="请输入对接视频监控平台地址"
                clearable
                maxlength="200"
              />
            </el-form-item>
          </template>
          <el-form-item
            label="归属电站"
            prop="stationId"
          >
            <qc-select
              :value="ruleForm.stationId"
              :remote="true"
              :filterable="true"
              :options="optionsS.orgStationData"
              placeholder="请输入搜索关键字"
              @change="handleChangeOrg"
            >
            </qc-select>
          </el-form-item>
          <el-form-item
            label="电站地址"
            prop=""
          >
            <el-input
              v-model.trim="ruleForm.stationAddr"
              disabled
            />
          </el-form-item>
          <el-form-item
            label="运营商"
            prop=""
          >
            <el-input
              v-model.trim="ruleForm.operator"
              disabled
            />
          </el-form-item>
        </el-form>
      </template>
    </Head>
    <div class="edit-btn-wrap">
      <el-button
        type="primary"
        plain
        @click="back"
      >取消</el-button>
      <el-button
        type="primary"
        v-btnAntiShake="onSubmit"
      >保存</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { FormInstance, FormRules } from "element-plus";
import Head from "@/components/head/index.vue";
import { addUser, updateUser, queryUserDetail } from "@/service/apis/user";
import { queryAllChannel } from "@/service/apis/org";
import { queryChannelDetail } from "@/service/apis/channel";
import { IS_PHONE_NUM } from "@/utils/verify";

import { queryDicByParent } from "@/service/apis/api";
import {
  updPeripheral,
  queryPeripheralList,
  queryAllStation,
  queryStationDetail,
  queryPeripheral,
} from "@/service/apis/pile";

const router = useRouter();
const route = useRoute();
const {
  query: { id, stationId },
} = route;
const ruleFormRef = ref<FormInstance>();
const dialogCarRef = ref();
const comCarRef = ref();

let optionsS = reactive({
  deviceTypeList: [] as any,
  orgStationData: [] as any,
});

let ruleForm: any = reactive({
  id: "",
  deviceType: undefined as unknown,
  deviceName: "",
  deviceNum: "",
  gateWayNum: "",
  stationId: undefined as unknown,
  stationAddr: "",
  operator: "",
  monitorUrl: '',
});

const rules = reactive<FormRules>({
  deviceType: [
    { required: true, message: "请选择设备类型", trigger: ["blur", "change"] },
  ],
  deviceName: [{ required: true, message: "请输入设备名称", trigger: "blur" }],
  deviceNum: [
    { required: true, message: "请输入设备编号", trigger: "blur" },
  ],
  gateWayNum: [
    { required: true, message: "请输入网关编号", trigger: "blur" },
  ],
  stationId: [
    { required: true, message: "请选择归属电站", trigger: ["blur", "change"] },
  ],
  monitorUrl: [
    { required: true, message: "请输入对接视频监控平台地址", trigger: ["blur"] },
  ],
});

const handleChangeOrg = (e: any) => {
  ruleForm.stationId = e;
  if (ruleForm.stationId) {
    // 根据电站id 查询 电站地址，运营商
    queryStationDetail({ id: e }).then((res: any) => {
      ruleForm.stationAddr = res.areaCodeName + res.address;
      ruleForm.operator = res.operatorName;
    });
  } else {
    ruleForm.stationAddr = '';
    ruleForm.operator = '';
  }
};

const handleDeviceType = (e: any) => {
  ruleForm.deviceType = e;
  if (ruleForm.deviceType == '6') {
    ruleForm.deviceName = '';
    ruleForm.deviceNum = '';
    ruleForm.gateWayNum = '';
  } else {
    ruleForm.monitorUrl = '';
  }
};

const back = () => {
  router.go(-1);
};

// 查询电站设备
const getData = () => {
  if (stationId) {
    ruleForm.stationId = stationId;
  }
  // 获取归属电站
  queryAllStation({}).then((res: any) => {
    if (res) {
      nextTick(() => {
        optionsS.orgStationData = [...res];
      });
    }
  });

  queryDicByParent({
    listDtos: ["peripheralType"],
  }).then((res: any) => {
    if (res) {
      optionsS.deviceTypeList = res.peripheralType;
    }
  });
};

getData();


// 编辑回填数据
if (id) {
  queryPeripheral({
    id: id,
  }).then((res: any) => {
    for (const key in ruleForm) {
      if (res[key]) {
        ruleForm[key] = res[key];
      }
    }
  });
}

const emit = defineEmits(["clear-cache"]);
const onSubmit = async () => {
  if (!ruleFormRef.value) return;
  await ruleFormRef.value.validate((valid, fields: any) => {
    if (valid) {
      // console.log("submit---", ruleForm);
      updPeripheral(ruleForm).then((res: any) => {
        emit("clear-cache");
        back();
      });
    } else {
      for (const key in ruleForm) {
        if (fields[key]) {
          ruleFormRef.value?.scrollToField(key);
          break;
        }
      }
    }
  });
};
</script>

<style lang="scss" scoped>
:deep(.combination-wrap .item-wrap) {
  .el-form-item:first-child .el-form-item__content {
    padding-left: 24px !important;
  }
}
</style>